<template>
  <div class="xlCell">
    <div class="top">
      <div class="left_text">
        <i v-if="icon" :class="['iconfont', icon]" :style="{ background: iconBackgroundColor }"></i>
        <text>{{ text }}</text>
        <text :class="[tagtype == 1 ? 'gray' : '']" class="tag" v-if="tag">{{ tag }}</text>
      </div>
      <div class="right_wrap" :style="{ color: rightIconColor }" @click="$emit('click')">
        <div class="solt-right" slot="right">
          <slot name="right"></slot>
        </div>
        <i :class="['iconfont', rightIcon]"></i>
      </div>
    </div>
    <div class="bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "xlCell",
  props: {
    icon: {
      type: String,
      default: "",
    },
    iconBackgroundColor: {
      type: String,
      default: "#ff8822",
    },
    rightIcon: {
      type: String,
      default: "cyjiantouyou",
    },
    rightColor: {
      type: String,
      default: "#BFBFBF",
    },
    text: {
      type: String,
      default: "标题",
    },
    tag: {
      type: String,
    },
    tagtype: {
      type: Number || String,
      default: 0,
    },
  },
  data() {
    return {};
  },
  computed: {
    style() {
      return this.tagsStyle;
    },
  },
  methods: {},
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    console.log(this.tagsStyle);
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.xlCell {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left_text {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 800;
      color: #333333;
      .iconfont {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
      .tag {
        background: rgba(230, 99, 99, 0.39);
        border-radius: 8px 8px 8px 2px;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 600;
        box-sizing: border-box;
        padding: 5px 0px;
        color: #e66363;
        margin-left: 5px;
        transform: scale(0.7);
      }
      .gray {
        color: #f0f0f0;
        background-color: #9c9c9c;
      }
    }
    .right_wrap {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      align-items: center;

      .iconfont {
        color: #d3d3d3;
      }
    }
  }
  .bottom {
    margin-top: 13px;
  }
}
</style>
